/**
 * Created by Ysssssss on 2021/4/12.
 */

import React, { useState } from 'react'
import { Input } from "antd";

const SearchInput = props => {
    const { onChange, initValue = '', value = '', style = {}, placeholder } = props
    const [ query, setQuery] = useState(initValue)

    // 关键字筛选变化
    const handleQueryChange = (e) => {
        setQuery(e.currentTarget.value)
    }

    const changeQuery = () => {
        onChange && onChange(query)
    }

    const clearQuery = () => {
        setTimeout(() => {
            setQuery(value)
        }, 150)
    }

    return (
        <Input.Search
            style={{ width: '130px', verticalAlign: 'middle', ...style }}
            placeholder={placeholder}
            value={query}
            onChange={handleQueryChange}
            onBlur={clearQuery}
            onSearch={changeQuery}
        />
    )
}

export default SearchInput